<template>
  <div>
    <div class="navbar">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <router-link to="/dashboard/dash" class="nav-link">首页</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <router-link :to="{ 
            name: 'Dashboard',
            params: { 
              standardName: standardName 
            }
          }" class="nav-link">{{ standardName || '标准管理' }}</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <router-link :to="{ 
            name: 'project-manage',
            params: { 
              param: projectId
            }
          }" class="nav-link">{{ projectName || '项目管理' }}</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="current-page">人员管理</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <div class="nav-back">
        <el-button type="text" @click="handleBack">
          <i class="el-icon-arrow-left"></i> 返回
        </el-button>
      </div>
    </div>

    <div class="container">
      <h1>请选择您要进入的界面</h1>
      <button class="btn" @click="goToTrainingManagement" @mouseover="startShake($event)" @mouseout="stopShake($event)">培训管理</button>
      <button class="btn" @click="goToAuthorization" @mouseover="startShake($event)" @mouseout="stopShake($event)">考核授权</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      projectId: null,
      projectName: '', // 项目名称
      standardName: '', // 标准名称
      standardId: null // 标准ID
    };
  },
  created() {
    // 获取路由参数
    const { param, projectName, standardName, staId } = this.$route.params;
    
    // 如果有路由参数，保存到localStorage
    if (param && projectName && standardName) {
      localStorage.setItem('peoplePageParams', JSON.stringify({
        projectId: param,
        projectName,
        standardName,
        staId
      }));
    }
    
    // 如果没有路由参数，从localStorage获取
    if (!param || !projectName || !standardName) {
      const savedParams = JSON.parse(localStorage.getItem('peoplePageParams') || '{}');
      this.projectId = savedParams.projectId;
      this.projectName = savedParams.projectName || '未知项目';
      this.standardName = savedParams.standardName || '未知标准';
      this.staId = savedParams.staId;
    } else {
      this.projectId = param;
      this.projectName = projectName;
      this.standardName = standardName;
      this.staId = staId;
    }
  },
  methods: {
    startShake(event) {
      // 添加抖动类到目标元素上
      event.target.classList.add('shake');
    },
    stopShake(event) {
      // 移除抖动类从目标元素上
      event.target.classList.remove('shake');
    },
    goToTrainingManagement() {
      if (this.projectId) {
        this.$router.push({ 
          name: 'train', 
          params: { 
            projectId: this.projectId,
            projectName: this.projectName,
            standardName: this.standardName,
            staId: this.staId
          } 
        });
      } else {
        console.error("无法跳转，projectId 未定义");
      }
    },
    goToAuthorization() {
      // 跳转到考核授权页面，并传递完整的项目信息
      if (this.projectId) {
        this.$router.push({ 
          name: 'audit_list', 
          params: { 
            param: this.projectId,
            projectName: this.projectName,
            standardName: this.standardName,
            staId: this.staId
          }
        });
      } else {
        console.error("无法跳转，projectId 未定义");
      }
    },
    // 获取项目和标准信息
    async getProjectInfo() {
      try {
        // 获取项目信息
        const projectResponse = await axios.get(`http://localhost:8081/project/getProjectInfo`, {
          params: { projectId: this.projectId }
        });
        if (projectResponse.data) {
          this.projectName = projectResponse.data.projectName;
          this.standardId = projectResponse.data.standardId;
          
          // 获取标准信息
          if (this.standardId) {
            const standardResponse = await axios.get(`http://localhost:8081/standard/getStandardInfo`, {
              params: { standardId: this.standardId }
            });
            if (standardResponse.data) {
              this.standardName = standardResponse.data.standardName;
            }
          }
        }
      } catch (error) {
        console.error('获取信息失败:', error);
      }
    },
    // 返回方法修改为返回到标准管理页面
    handleBack() {
      this.$router.push({
        name: 'project-manage',
        params: { 
          param: this.projectId,
          standardName: this.standardName
        }
      });
    },
  }
};
</script>

<style scoped>
.navbar {
  padding: 20px;
  background-color: #f5f7fa;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  margin-bottom: 20px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-back {
  margin-left: auto;
}

.nav-back .el-button {
  font-size: 14px;
  color: #909399;
}

.nav-back i {
  margin-right: 5px;
}

.el-breadcrumb {
  font-size: 16px;
  line-height: 1.5;
}

.el-breadcrumb ::v-deep .el-breadcrumb__inner a {
  color: #909399;  /* 非当前页面使用灰色 */
  font-weight: 400;
  font-size: 16px;
}

.current-page {
  color: #409EFF !important;  /* 当前页面使用蓝色 */
  font-weight: 500;
  font-size: 16px;
}

.container {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  max-width: 900px;
  margin: 20px auto;
  padding: 100px;
  text-align: center;
}

h1 {
  color: #333;
  font-weight: bold;
  margin-bottom: 30px;
  font-size: 24px;
}

.btn {
  background-color: #6CFFDE;
  border: none;
  border-radius: 4px;
  color: rgb(0, 0, 0);
  cursor: pointer;
  font-size: 20px;
  margin: 40px;
  padding: 60px 50px;
  transition: background-color 0.3s ease;
  outline: none;
  font-weight: 500;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}
</style>
